<template lang="html">
  <section class="wrapper">
    <ul class="bg-list">
      <li class="bg bg-01">
        <img class="logo" src="/static/images/activity/logo.png" alt="">
        <img class="title-01" src="/static/images/activity/title01.png" alt="">
        <div class="banner-01"></div>
      </li>
      <li class="bg bg-02">
        <div class="content">
          <p class="text">
            为了回馈全课通的用户，在今年暑，特意为大家准备英语口语和奥数精讲课程盛宴。一起跟着<span class="font-yellow">帅气外教学习原汁原味的英语发音</span>，跟着<span class="font-yellow">奥数专家学习超强的奥数逻辑分析方法</span>。
          </p>
          <p class="text">
            上课地点设在在舒适时尚的中山创客众创中心，一改教室严肃的氛围，关键是<span class="font-yellow">6天课程全部免费喔</span>，名额珍贵，赶快报名啦。
          </p>
          <p class="text">
            由于此次活动<span class="font-yellow">上课地点在中山</span>，所以很抱歉不能满足所有的小伙伴！不过不能到现场的小朋友们可以登录全课通平台<span class="font-yellow">在线看直播</span>，一起参与互动，让这个暑假high 起来！
          </p>
        </div>
      </li>
      <li class="bg bg-03">
        <div class="title-02"></div>
        <!-- 课程1 -->
        <div class="block-modal">
          <h3 class="block-title">课程1-GESE等级英语口语实际应用课</h3>
          <div class="block-content">
            <div class="block-header">
              <div class="block-header-left">
                <img class="avatar" src="/static/images/activity/avatar.png" alt="" @click="openIntroduction()">
                <p class="avatar-name"><span>外教老师 Jamie Dornan</span></p>
              </div>
              <div class="block-header-right font-default">
                <p class="font-green">• 上课时间：</p>
                <p>2017年7月17日~2017年7月21日 早上9点-11点</p>
                <p><span class="font-green">• 课程适用于：</span>小学4-6年级学生</p>
                <p><span class="font-green">• 课程设计标准：</span>英国伦敦三一学院英语口语等级1级2级考试</p>
                <p><span class="font-green">• 课程名额：</span>25名</p>
              </div>
            </div>
            <div class="block-body">
              <h4 class="block-body-title">课程安排</h4>
              <ul class="block-body-table">
                <li class="row">
                  <div class="th col-1">上课时间</div>
                  <div class="th col-2">主题</div>
                  <div class="th col-3">等级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/17</div>
                  <div class="td col-2">Greetings, talk about numbers and colors</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/18</div>
                  <div class="td col-2">Body parts, dress</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/19</div>
                  <div class="td col-2">Classroom and dictionaries</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/20</div>
                  <div class="td col-2">Family</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/21</div>
                  <div class="td col-2">Friends</div>
                  <div class="td col-3">GESE一级</div>
                </li>
              </ul>
            </div>
            <div class="block-footer">
              <a href="javascript:void(0);" class="block-footer-btn" @click="openEnroll(1)">我要报名</a>
              <p class="block-footer-tips">温馨提示：预约成功后我们会采取抽取的方式选取25名学生，全课通VIP用户被抽中的机率更高喔。</p>
            </div>
          </div>
        </div>

        <!-- 课程2 -->
        <div class="block-modal">
          <h3 class="block-title">课程2-GESE等级英语口语实际应用课</h3>
          <div class="block-content">
            <div class="block-header">
              <div class="block-header-left">
                <img class="avatar" src="/static/images/activity/avatar.png" alt=""  @click="openIntroduction()">
                <p class="avatar-name"><span>外教老师 Jamie Dornan</span></p>
              </div>
              <div class="block-header-right font-default">
                <p class="font-green">• 上课时间：</p>
                <p>2017年7月17日~2017年7月21日 早上9点-11点</p>
                <p><span class="font-green">• 课程适用于：</span>小学4-6年级学生</p>
                <p><span class="font-green">• 课程设计标准：</span>英国伦敦三一学院英语口语等级1级2级考试</p>
                <p><span class="font-green">• 课程名额：</span>25名</p>
              </div>
            </div>
            <div class="block-body">
              <h4 class="block-body-title">课程安排</h4>
              <ul class="block-body-table">
                <li class="row">
                  <div class="th col-1">上课时间</div>
                  <div class="th col-2">主题</div>
                  <div class="th col-3">等级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/17</div>
                  <div class="td col-2">Greetings, talk about numbers and colors</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/18</div>
                  <div class="td col-2">Body parts, dress</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/19</div>
                  <div class="td col-2">Classroom and dictionaries</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/20</div>
                  <div class="td col-2">Family</div>
                  <div class="td col-3">GESE一级</div>
                </li>
                <li class="row">
                  <div class="td col-1 font-green">2017/7/21</div>
                  <div class="td col-2">Friends</div>
                  <div class="td col-3">GESE一级</div>
                </li>
              </ul>
            </div>
            <div class="block-footer">
              <a href="javascript:void(0);" class="block-footer-btn" @click="openEnroll(2)">我要报名</a>
              <p class="block-footer-tips">温馨提示：预约成功后我们会采取抽取的方式选取25名学生，全课通VIP用户被抽中的机率更高喔。</p>
            </div>
          </div>
        </div>
      </li>
      <li class="bg bg-04"></li>
      <li class="bg bg-05">
        <div class="title-03"></div>
        <ul class="image-list">
          <li class="image-item">
            <img src="/static/images/activity/pic01.png" alt="">
          </li>
          <li class="image-item">
            <img src="/static/images/activity/pic02.png" alt="">
          </li>
        </ul>
        <div class="info">
          <p class="p1">舒适开放的创客众创中心咖啡厅，</p>
          <p class="p1">解放你的思维，</p>
          <p class="p1">让上课更轻松高效。</p>
          <div class="line"></div>
          <p class="p2">中山创客众创中心：</p>
          <p class="p2">中山市东区东裕路97号五楼</p>
        </div>
      </li>
    </ul>
    <!-- 老师介绍 -->
    <modal :params="{title: '老师介绍', closeFn: hideIntroduction}" v-show="!firstLoad && showIntroduction">
      <div class="modal-content modal-introduction">
        <img class="avatar" src="/static/images/activity/avatar.png" alt="">
        <p class="avatar-name">外教老师 Jamie Dornan</p>
        <p class="introduction">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
        </p>
        <a href="javascript: void(0);" class="submit-btn" @click="hideIntroduction()">确定</a>
      </div>
    </modal>
    <!-- 报名表 -->
    <modal :params="{title: '报名表', closeFn: hideEnroll}" v-show="!firstLoad && showEnroll">
      <div class="modal-content modal-enroll">
        <div class="enroll-form">
          <p class="enroll-title">请如实填写如下报名信息</p>
          <div class="row">
            <label class="enroll-label" for="">姓名</label>
            <div class="enroll-right">
              <input type="text" class="enroll-input" placeholder="请输入孩子的姓名" v-model="opt.name">
            </div>
          </div>
          <div class="row">
            <label class="enroll-label" for="">联系电话</label>
            <div class="enroll-right">
              <input type="text" class="enroll-input phone" placeholder="请输手机号码" v-model="opt.phone">
              <a href="javascript:void(0);" class="send-btn" :class="{'forbidden': opt.time >= 0}" @click="send()">
                <span v-show="opt.time < 0">发送验证码</span>
                <span v-show="opt.time >= 0">获取验证码（{{opt.time}}）</span>
              </a>
            </div>
          </div>
          <div class="row">
            <label class="enroll-label" for="">验证码</label>
            <div class="enroll-right">
              <input type="text" class="enroll-input" placeholder="请输入验证码" v-model="opt.code">
            </div>
          </div>
          <div class="row">
            <label class="enroll-label" for="">年级</label>
            <div class="enroll-right">
              <div class="enroll-select">
                <div class="select-value" @click="openSelect()">{{opt.grade.name}}</div>
                <ul class="select-list" v-show="showGradeList">
                  <li :class="{'active': item.id == opt.grade.id}" v-for="item in gradeList" @click="selectGrade(item)">{{item.name}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a href="javascript: void(0);" class="submit-btn" @click="submitEnroll()">确定</a>
      </div>
    </modal>
    <!-- 报名提示 -->
    <modal :params="{title: '报名成功', closeFn: hideTips}" v-show="!firstLoad && showTips">
      <div class="modal-content modal-tips">
        <p class="p1 font-red">您已经成功报名了</p>
        <p class="p2 font-red">【课程1-GESE等级英语口语实际应用课】</p>
        <p class="p3">我们将以抽取的方式选出25个上课名额，请留意短信通知，另外我们也将有工作人员与您联系。</p>
        <p class="p4 font-red">TIPS：分享本活动，被抽中的机率更高喔！</p>
        <a href="javascript: void(0);" class="submit-btn" @click="hideTips()">确定</a>
      </div>
    </modal>

  </section>
</template>

<script>
import modal from '@/components/activity/modal';
export default {
  data() {
    return {
      firstLoad: true,
      // 显示教师信息弹层
      showIntroduction: false,
      // 显示报名表
      showEnroll: false,
      // 显示报名成功
      showTips: false,
      // 年级列表
      showGradeList: false,
      gradeList: [
        {id: 3, name: "三年级"},
        {id: 4, name: "四年级"},
        {id: 5, name: "五年级"}
      ],
      // 表单数据
      opt: {
        id: "",
        name: "",
        phone: "",
        code: "",
        grade: {
          id: 0,
          name: ""
        },
        time: -1
      }
    }
  },
  methods: {
    init() {
      this.firstLoad = false;
    },
    // 打开老师信息弹层
    openIntroduction() {
      this.showIntroduction = true;
    },
    // 关闭老师信息弹层
    hideIntroduction() {
      this.showIntroduction = false;
    },
    // 打开报名表
    openEnroll(id) {
      this.showEnroll = true;
      this.opt = {
        id: id,
        name: "",
        phone: "",
        code: "",
        grade: {
          id: 0,
          name: ""
        },
        time: -1
      };
    },
    openSelect() {
      this.showGradeList = true;
    },
    selectGrade(item) {
      this.opt.grade = item;
      this.showGradeList = false;
    },
    // 发送短信
    send() {
      var self = this;
      if(self.opt.time > 0) {
        return;
      }
      self.opt.time = 60;
      var interval =  setInterval(function () {
        if(self.opt.time >= 0) {
          self.opt.time--;
        } else {
          clearInterval(interval);
        }
      }, 1000);
    },
    // 关闭报名表
    hideEnroll() {
      this.showEnroll = false;
    },
    // 提交
    submitEnroll() {
      this.showEnroll = false;
      console.log(this.opt);
      this.openTips("success");
    },
    // 打开提示弹层
    openTips(type) {
      this.showTips = true;
    },
    // 关闭提示弹层
    hideTips() {
      this.showTips = false;
    }
  },
  components: {
    modal: modal
  },
  mounted() {
    this.init();
  }
}

</script>

<style lang="scss" scoped>
@import "../../assets/scss/activity.scss";

// set font-color
@include setFontColor;

.wrapper {
  width: px2rem(750);
}
.bg-list {
  width: 100%;
  .bg {
    width: 100%;
    background-position: center top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &.bg-01 {
      background-image: url("/static/images/activity/bg/bg01.png");
      background-color: #3bbcf8;
      height: px2rem(696);
      position: relative;
      .logo {
        width: px2rem(240);
        height: px2rem(93);
        position: absolute;
        left: 50%;
        top: px2rem(90);
        transform: translateX(-50%);
      }
      .title-01 {
        width: px2rem(519);
        height: px2rem(303);
        position: absolute;
        left: 50%;
        top: px2rem(190);
        transform: translateX(-50%);
      }
      .banner-01 {
        width: px2rem(672);
        height: px2rem(102);
        position: absolute;
        left: 50%;
        top: px2rem(499);
        transform: translateX(-50%);
        @include setBackgroundImage("/static/images/activity/banner01.png");
      }
    }
    &.bg-02 {
      background-image: url("/static/images/activity/bg/bg02.png");
      background-color: #3bbcf8;
      height: px2rem(417);
      .content {
        padding: 0 px2rem(30);
        box-sizing: border-box;
        .text {
          font-size: px2rem(24);
          line-height: 1.4;
          margin-bottom: px2rem(39);
          text-indent: 2em;
          color: #fffefe;
        }
      }
    }
    &.bg-03 {
      background-image: url("/static/images/activity/bg/bg03.png");
      height: px2rem(1209);
      background-color: #5ecadd;
      position: relative;
      .title-02 {
        width: px2rem(678);
        height: px2rem(34);
        margin: 0 auto px2rem(34);
        @include setBackgroundImage("/static/images/activity/title02.png");
      }
      .block-modal {
        width: 100%;
        .block-title {
          color: $white;
          font-size: px2rem(34);
          text-align: center;
          font-weight: normal;
          margin: 0 auto px2rem(27);
        }
      }
      .block-content {
        width: px2rem(678);
        padding: px2rem(30) px2rem(18);
        box-sizing: border-box;
        margin: 0 auto;
        background-color: $white;
        border-radius: 5px;
        box-shadow: 0 0 5px 1px rgba($green, 0.2);
        margin-bottom: px2rem(50);
      }
      .block-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: px2rem(30);
        &-left {
          width: px2rem(260);
          height: px2rem(312);
          position: relative;
          .avatar {
            width: px2rem(219);
            height: px2rem(309);
          }
          .avatar-name {
            width: px2rem(275);
            height: px2rem(55);
            background-image: url("/static/images/activity/label01.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            bottom: 0;
            left: px2rem(-34);
            span {
              display: block;
              color: $white;
              font-size: px2rem(20);
              text-align: center;
              margin-top: px2rem(21);
            }
          }
        }
        &-right {
          width: px2rem(370);
          color: $default;
          p {
            font-size: px2rem(24);
            line-height: px2rem(45);
          }
        }
      }
      .block-body {
        &-title {
          color: $white;
          background-color: $green;
          text-align: center;
          line-height: px2rem(56);
          font-size: px2rem(28);
          font-weight: normal;
          margin: 0 auto px2rem(30);
        }
        &-table {
          width: 100%;
          color: $default;
          margin: 0 auto px2rem(30);
          font-size: px2rem(24);
          .row {
            display: flex;
            flex-flow: nowrap;
            .th,
            .td {
              text-align: center;
              line-height: px2rem(46);
              &.col-1 {
                width: px2rem(148);
              }
              &.col-2 {
                width: px2rem(360);
              }
              &.col-3 {
                width: px2rem(136);
              }
            }
            .th {
              font-weight: bold;
            }
          }
        }
      }
      .block-footer {
        width: 100%;
        &-btn {
          display: block;
          text-align: center;
          color: $white;
          width: px2rem(371);
          height: px2rem(77);
          line-height: px2rem(77);
          margin: 0 auto px2rem(30);
          font-size: px2rem(36);
          @include setBackgroundImage("/static/images/activity/btn.png");
        }
        &-tips {
          color: $grey;
          font-size: px2rem(20);
          line-height: px2rem(40);
          text-align: center;
        }
      }
    }
    &.bg-04 {
      background-image: url("/static/images/activity/bg/bg04.png");
      height: px2rem(1140);
      background-color: #5ecadd;
    }
    &.bg-05 {
      background-image: url("/static/images/activity/bg/bg05.png");
      height: px2rem(730);
      background-color: #5ecadd;
      &:before {
        content: '';
        display: block;
        background-color: transparent;
        width: 100%;
        height: px2rem(20);
      }
      .title-03 {
        width: px2rem(678);
        height: px2rem(35);
        @include setBackgroundImage("/static/images/activity/title03.png");
        margin: 0 auto px2rem(28);
      }
      .image-list {
        width: px2rem(678);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto px2rem(45);
        .image-item {
          width: px2rem(332);
          height: px2rem(248);
          &>img {
            width: 100%;
          }
        }
      }
      .info {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        &>p {
          text-align: center;
          color: $white;
          &.p1 {
            font-size: px2rem(24);
            margin-bottom: px2rem(20);
          }
          &.p2 {
            font-size: px2rem(34);
            margin-bottom: px2rem(10);
          }
        }
        .line {
          width: px2rem(348);
          height: px2rem(3);
          background-color: $white;
          margin-bottom: px2rem(30);
        }
      }
    }
  }
}
.modal-content {
  .submit-btn {
    width: px2rem(136);
    height: px2rem(40);
    line-height: px2rem(40);
    display: block;
    margin: 0 auto;
    background-color: $green;
    color: $white;
    border-radius: 3px;
    font-size: px2rem(18);
    text-align: center;
  }
}
.modal-introduction {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: $default;
  .avatar {
    width: px2rem(157);
    height: px2rem(222);
    margin: px2rem(22) auto px2rem(12);
  }
  .avatar-name {
    font-size: px2rem(15);
  }
  .introduction {
    width: px2rem(394);
    font-size: px2rem(18);
    line-height: px2rem(36);
    margin: px2rem(20) auto px2rem(13);
  }
}
.modal-enroll {
  width: 100%;
  .enroll-form {
    width: 100%;
    padding: px2rem(64) px2rem(45) px2rem(35);
    font-size: px2rem(18);
    color: $default;
    .enroll-title {
      margin-bottom: px2rem(20);
    }
    .row {
      width: 100%;
      margin-bottom: px2rem(26);
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .enroll-label {
      width: px2rem(100);
    }
    .enroll-right {
      display: flex;
      flex-flow: nowrap;
      justify-content: space-between;
      align-items: center;
    }
    .enroll-input {
      // width: px2rem(254);
      width: px2rem(274);
      height: px2rem(32);
      line-height: px2rem(32);
      font-size: px2rem(17);
      color: $default;
      border: 1px solid #26b1f1;
      border-radius: 3px;
      &.phone {
        width: px2rem(154);
        margin-right: px2rem(4);
      }
    }
    .send-btn {
      width: px2rem(116);
      color: $white;
      background-color: $green;
      line-height: px2rem(32);
      display: block;
      font-size: px2rem(16);
      text-align: center;
      border-radius: 3px;
      &.forbidden {
        background-color: $grey;
      }
    }
    .enroll-select {
      width: 100%;
      position: relative;
      &:before {
        content: '';
        display: block;
        position: absolute;
        right: px2rem(13);
        top: px2rem(10);
        width: 0;
        height: 0;
        border-left: px2rem(6.5) solid transparent;
        border-right: px2rem(6.5) solid transparent;
        border-top: px2rem(13) solid $black;

      }
      .select-value {
        width: px2rem(274);
        height: px2rem(32);
        line-height: px2rem(32);
        font-size: px2rem(17);
        color: $default;
        border: 1px solid #26b1f1;
        border-radius: 3px;
      }
      .select-list {
        width: 100%;
        position: absolute;
        box-sizing: border-box;
        border-left: 1px solid #26b1f1;
        border-right: 1px solid #26b1f1;
        border-bottom: 1px solid #26b1f1;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        li {
          width: 100%;
          background: $white;
          color: $default;
          &.active {
            background-color: $green;
            color: $white;
          }
        }
      }
    }
  }
}
.modal-tips {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  p {
    width: px2rem(395);
    text-align: center;
    color: $default;
    font-size: px2rem(18);
    line-height: px2rem(36);
  }
  .p1 {
    margin-top: px2rem(50);
  }
  .p4 {
    margin-bottom: px2rem(30);
  }
}
</style>
